<template>
  <div class="app_warpper">
    <div>
      <div>{{ msg }}</div> 
      <div>{{ sum }}</div>
      <div>
        <div>姓名：{{ person.name }}</div>
        <div>年龄：{{ person.age }}</div>
        <div>地址：{{ person.address }}</div>
      </div>
      <div class="btn_warpper">
        <button @click="addSum">添加数字</button>
        <button @click="addAge">添加年龄</button>
      </div>
    </div>
    <div class="personInfo">
      姓：<input type="text" v-model="name1" name="" id=""><br/>
      名：<input type="text"  v-model="name2" name="" id=""><br/>
      全名：<span>{{ fullName }}</span>
    </div>
  </div>
  <PracticeCourt/>
</template>

<script lang='ts' setup name='ComponentName'>
import { ref, reactive, toRefs, computed  } from 'vue';


//watch 作用 监视数据的变化  vue3只能监视以下四种数据 ref 定义的数据  reactive定义的对象   函数返回的一个值（getter 值） 以及一个包含上述内容的数组

//情况1
//情况2






let name1 = ref('王');
let name2 = ref('小宝');
//使用计算属性拼接名称  存在缓存 且是只读的
let fullName = computed(()=>{
  return `${name1.value}-${name2.value}`;
})


//ref 声明响应式 基础数据 对象数据
//reactive 声明响应式 只能是对象类型数据    重新分配一个新对象 会失去响应式  层级较深建议使用reactive创建
//toRefs  将每一个响应式对象的每一个属性转换为 ref对像  
//toRefs 和 toRef 功能一直 但toRefs 可以批量转换   语法结构赋值  let  person = toRefs(person) 实现响应式  toRef 单个结构
let sum = ref(0)
let msg = ref("我是ref生成的基本数据信息！")
let person = reactive({
  name:"王小宝",
  age:31,
  address:"福建泉州洛江区马甲镇"
})
function addSum(){
  sum.value += 1
}
//
let {name,age,address} = toRefs(person);
function addAge(){
  age.value += 1
  name.value = "旺仔1号"
  address.value = "福建泉州洛江区马甲镇北溪9号"
}

</script>

<style scoped>
.app_warpper{
  color: #333;
  padding: 10px;
  width: 100%;
  min-height: 60px;
  background-color: rgb(104, 227, 227);
  box-shadow: 2px 2px 2px #4e4e4e;
}
</style>